<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #canvas{
            /*width: 300px;
            height: 300px;*/
            background: lightcyan;
            border: 1px solid grey;
        }
        .range{
            width: 1000px;
        }
    </style>
</head>
<body>
<h3>如何创建canvas面板</h3>
<p>
    <canvas id="canvas">
        浏览器不支持
    </canvas>
    <br/>
    <input class="range" id="range" type="range" min="0.5" max="2" step="0.01" value="1.0"/>
</p>

</body>
<script>
    //document.onload it is called when DOM is ready
    //window.onload By default, it is fired when the entire page loads,including DOM and its content(images\css\script\etc.)
    var canvas = document.getElementById('canvas');
    var range = document.getElementById('range');
    var scale = range.value;
    var ctx = canvas.getContext('2d');
    var image = new Image();
    //加水印防止盗图  技术：绘制图片 或者 离屏技术，新增一个canvas 在上面绘制js绘制了水印  drawImage可以绘制一个canvas
    window.onload= function () {
        canvas.width=1000;
        canvas.height=600;
        //在canvas context上下文中开始回执
        image.src='widget/5.jpg';
        //图片加载完成才能正确渲染图片
        image.onload= function () {
//            ctx.drawImage(image,50,50,800,500);
            //前四个 对应原图像对象 后四个 对应画布的位置
//            ctx.drawImage(image,50,50,800,500,50,50,900,500);
            drawImageByScale(scale);
        };

        //图像缩放功能  默认基于中心
        /*range.onchange = function () {
            //鼠标弹起才起作用
            var scale = range.value;
            drawImageByScale(scale);
        }*/
        range.onmousemove = function () {
         var scale = range.value;
         drawImageByScale(scale);
         }

    };
    function drawImageByScale(scale){
        console.log(scale);
        var imageW = 1000*scale;
        var imageH = 600*scale;

        var offX = canvas.width/2 -imageW/2;
        var offXY= canvas.height/2 -imageH/2;
        ctx.clearRect(0,0,canvas.width,canvas.height);
//        ctx.drawImage(image,offX,offXY,canvas.width,canvas.height,0,0,canvas.width,canvas.height);
        ctx.drawImage(image,offX,offXY,imageW,imageH);
    }

</script>
</html>